import React from 'react';
import { Tabs } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import styles from './index.less';

const { TabPane } = Tabs;

interface ITabCofing {
  key: string;
  name: string;
  component: React.ReactNode;
}

interface IPageTabsProps {
  activeKey: string;
  configList: Array<ITabCofing>;
  handleTabChange?: (key: string) => void;
}

const PageTabs: React.FC<IPageTabsProps> = props => {
  const { configList = [], activeKey, handleTabChange } = props;

  return (
    <PageHeaderWrapper>
      <Tabs
        type="card"
        className={styles.pageTabs}
        activeKey={activeKey}
        onChange={handleTabChange}
      >
        {configList.map((config: ITabCofing) => (
          <TabPane tab={config.name} key={config.key}>
            <div className={styles.pageTable}>{config.component()}</div>
          </TabPane>
        ))}
      </Tabs>
    </PageHeaderWrapper>
  );
};

export default PageTabs;
